<template>
    <div class="bottom-bar">
        <div class="check-content">
            <check-button class="check-all"></check-button><span>全选</span>
        </div>
        <div class="total-price">
            合计: {{totalPrice}}
        </div>
        <div class="calculate" @click="calcClick">
            去结算: {{checkLength}}
        </div>
    </div>
</template>

<script>
import CheckButton from 'components/content/checkbutton/CheckButton'

export default {
    name: 'CartBottomBar',//购物车底部汇总
    components: {
        CheckButton
    },
    computed: {
        // 总金额
        totalPrice() {
            return '$' + this.$store.state.cartList.filter(item => {
                return item.checked//得到选中的商品
            }).reduce((preValue,item) => {
                return preValue + item.price * item.count//计算总价格
            },0).toFixed(2)
        },
        // 选中商品数量
        checkLength() {
            return this.$store.state.cartList.filter(item => item.checked).length
        },
        // 全选按钮是否高亮
        isSelectAll() {
            // return !(this.$store.state.cartList.filter(item => !item.checked).length)

            if(this.$store.state.cartList.length === 0) return false;//购物车为空直接false
            return !(this.$store.state.cartList.find(item => !item.checked))
        }
    },
    methods: {
        // 全选按钮
        checkClick() {
            if(this.isSelectAll) {
                this.$store.state.cartList.forEach(item => item.checked = false)//全不选中
            }
            else {
                this.$store.state.cartList.forEach(item => item.checked = true)//全选中
            }
            // this.$store.state.cartList.forEach(item => item.checked = !this.isSelectAll)//有bug的代码
        },
        // 弹窗提示
        calcClick() {
            if(!this.checkLength) {
                this.$toast.show('购物车为空',2000)
            }
        }
    }
}
</script>

<style scoped>
    .bottom-bar {
        height: 40px;
        line-height: 40px;
        background-color: #eee;
        display: flex;
    }
    .check-content {
        display: flex;
        align-items: center;
        margin-left: 5px;
        width: 60px;
    }
    .check-all {
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-right: 2px;
    }
    .total-price {
        flex: 1;
        margin-left: 20px;
    }
    .calculate {
        width: 90px;
        text-align: center;
        background-color: red;
    }
</style>